<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .box{
            box-sizing: border-box;
            width:300px;
            height:200px;
            border:1px solid red;
            margin-left: 20px;

            /*隐藏溢出的内容*/
            overflow: hidden;
        }
        .box img{
            width:100%;
            height:100%;
            /*把图片平移出去*/
            transform:translate(-100%);
            /*2.设置动画*/
            animation-name:move;
            animation-duration:2s;
            animation-fill-mode: forwards;
        }
        /*1,定义关键帧*/
        @keyframes move{
            from{
                transform:translateX(-100%);
            }
            to{
                transform:translateX(0);
            }
        }
    </style>
</head>
<body>
<div class="box">
    <img src="/static/w2/images/1.jpg">
</div>

</body>
</html>